<template>
  <div class="content-container">
    <div class="item-header">
      <div class="header-title">用户管理</div>
    </div>
    <div class="item-content" v-loading="contentLoading">
      <el-form
        v-show="isShowSearchForm"
        class="search-form"
        :inline="true"
        :model="searchUserForm"
        :rules="searchUserFormRules"
        ref="searchUserFormRef"
        label-position="right"
        label-width="auto"
        >
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model.trim="searchUserForm.userId" placeholder="用户ID" clearable/>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model.trim="searchUserForm.userName" placeholder="用户名" clearable/>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model.trim="searchUserForm.phonenumber" placeholder="手机号" clearable/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="searchUserForm.email" placeholder="邮箱" clearable/>
        </el-form-item>
      </el-form>
      <div class="operation-btns">
        <el-button type="primary" @click="searchUserList">查询</el-button>
        <el-button @click="resetSearchForm">重置</el-button>
        <el-button v-if="isShowSearchForm" type="primary" link @click="foldOperate"><el-icon class="el-icon--right"><ArrowUp /></el-icon>收起</el-button>
        <el-button v-else type="primary" link @click="foldOperate"><el-icon class="el-icon--right"><ArrowDown /></el-icon>展开</el-button>
      </div>
      <el-table
        :data="userList"
        style="width: 100%; margin-top: 20px;"
        stripe
        border
        resizable
        >
        <el-table-column label="用户名" prop="userName" fixed show-overflow-tooltip/>
        <el-table-column label="用户ID" prop="userId" show-overflow-tooltip/>
        <el-table-column label="用户类型" prop="userType" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ userTypeEnum[row.userType] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phonenumber" show-overflow-tooltip/>
        <el-table-column label="邮箱" prop="email" show-overflow-tooltip/>
        <el-table-column label="状态" prop="status" width="70" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="userStatusTagEnum[row.status]">{{ userStatusEnum[row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip/>
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button size="small" type="primary" link @click="editUser(scope.row)">编辑</el-button>
            <el-button size="small" type="primary" link @click="deleteUserConfirm(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <HPagination
        v-if="userListPage.total > 0"
        :pageSize="userListPage.pageSize"
        :currentPage="userListPage.currentPage"
        :totalSize="userListPage.total"
        :pageSizeList="[10, 20, 30, 50]"
        @selectPageSize="userListSizeChange"
        @handleCurrentChange="userListCurrentChange"
      >
      </HPagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { userInfoStore } from '@/stores'
import Validator from '@/assets/js/validatorReg'
import { userStatusEnum, userStatusTagEnum, userTypeEnum } from '@/assets/js/enum'

const route = useRoute()
const router = useRouter()
const useUserInfoStore = userInfoStore()
const contentLoading = ref<boolean>(false)
const searchUserFormRef = ref<any>(null)
const isShowSearchForm = ref(true)
const foldOperate = () => {
  isShowSearchForm.value = !isShowSearchForm.value
}

const searchUserForm = reactive({
  userId: '',
  userName: '',
  phonenumber: '',
  email: '',
})
const searchUserFormRules = reactive({
  userId: [
    { required: false, message: '请输入用户ID', trigger: 'blur' }
  ],
  userName: [
    { required: false, message: '请输入用户名', trigger: 'blur' }
  ],
  phonenumber: [
    { required: false, message: '请输入手机号', trigger: 'blur' },
    { validator: Validator.mobilePhoneValidator, trigger: 'blur' }
  ],
  email: [
    { required: false, message: '请输入邮箱', trigger: 'blur' },
    { validator: Validator.emailValidator, trigger: 'blur' }
  ],
})

const userList = ref<any>([])

// 分页
const userListPage = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 1 //TODO: 后端返回
})
const userListSizeChange = (val: number) => {
  userListPage.currentPage = 1
  userListPage.pageSize = val
  getUserList()
}
const userListCurrentChange = (val: number) => {
  userListPage.currentPage = val
  getUserList()
}

// 查询
const searchUserList = () => {
  getUserList()
}

// 重置
const resetSearchForm = () => {
  searchUserFormRef.value.resetFields()
  userListPage.currentPage = 1
  userListPage.pageSize = 10
  getUserList()
}
// 编辑用户
const editUserId = ref<string>('')
const editUser = (row: any) => {
  // TODO: 编辑用户
}
// 删除确认
const deleteUserConfirm = (row: any) => {
  ElMessageBox.confirm(
    '确定删除该用户吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false,
      closeOnPressEscape: false
    }
  )
  .then(() => {
    deleteUser(row)
  })
  .catch(() => {
  })
}
// 删除用户
const deleteUser = (row: any) => {
  const params = {
    userId: row.userId
  }
  useUserInfoStore.deleteUser(params).then((res: any) => {
    const { state, body } = res
    if (state === 'OK' && body) {
      ElMessage.success('删除成功')
      getUserList()
    } else {
      ElMessage.error(res.errorMessage || '删除失败')
    }
  })
  .catch((err: any) => {
    ElMessage.error(err.errorMessage || '删除失败')
  })
}
// 获取用户列表
const getUserList = () => {
  contentLoading.value = true
  const params = {
    
  }
  useUserInfoStore.getUserList(params).then((res: any) => {
    const { state, body } = res
    if (state === 'OK' && body) {
      userList.value = body.content || []
      userListPage.total = body.total || 0
    } else {
      ElMessage.error(res.errorMessage || '获取用户列表失败')
    }
  })
  .catch((err: any) => {
    ElMessage.error(err.errorMessage || '获取用户列表失败')
  })
  .finally(() => {
    contentLoading.value = false
  })
}

onMounted(() => {
  getUserList()
})

</script>

<style lang="scss" scoped>
.content-container {
  .item-content {
    .search-form {
      .el-input {
        width: 240px;
      }
      .el-select {
        width: 200px;
      }
    }
  }
}
:deep(.h-row) {
  .h-cell {
    background: #F4F5F7;
    .cell {
      border-left: 1px solid #FFFFFF;
      font-size: 12px;
      color: #333;
    }
    &:first-child {
      .cell {
        border-left: none;
      }
    }
  }
}
</style>
